<template>
  <view class="content">
    <!--顶部标题-->
    <!--    <view class = "Tab">
          <view class = "TabLeft">
            <image
                :src = "`${BASE_URL}/mine/back.png`"
                style = "width: 75rpx; height: 75rpx;"
                @click = "back"
            ></image>
          </view>
          <view class = "TabCenter">
            <view style = "font-size: 40rpx; font-weight: 400; margin-right: 50rpx">我的收藏</view>
          </view>
        </view>-->
    <view class="list_item" v-for="(item, index) in List" :key="index">
      <view class="image_list" style="margin-bottom: 25rpx;">
        <image :src="`${BASE_URL}/mine/image1.png`" alt="图片" style="width: 100%; height: 20vh;"></image>
      </view>
      <view class="info_bottom">
        <view class="info_bottom_left">
          <view style="font-size: 40rpx;">{{ item.title }}</view>
          <view style="font-size: 20rpx; color: gray;">收藏量 {{ item.collection }}</view>
        </view>
        <view class="info_bottom_right">
          <image :src="item.isLiked ? `${BASE_URL}/mine/heart_checked.png` : `${BASE_URL}/mine/heart_uncheck.png`"
            @click="toggleLike(item)" style="width: 50rpx; height: 50rpx;" />
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { BASE_URL } from "../../../utils/api";

// 定义收藏列表，每行数据包含独立的 isLiked 状态
const List = ref([{
  title: '龙川打马灯', collection: 248, isLiked: false // 初始状态为未点赞
}]);

// 切换爱心状态
const toggleLike = (item) => {
  item.isLiked = !item.isLiked; // 切换当前行的 isLiked 状态
};

// 返回按钮事件
function back() {
  uni.switchTab({
    url: '/pages/mine/mine', success: (res) => {
      console.log("跳转成功");
    }, fail: (err) => {
      console.error("跳转失败", err);
    }
  });
}
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;
  position: relative;
}

.Tab {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 12vh;
  background-color: rgba(229, 237, 213, 1);
  justify-content: center;
  align-items: flex-end;

}

.TabLeft {
  flex: 0.1;
  display: flex;
  justify-content: start;
  margin-bottom: 25px;
}

.TabCenter {
  flex: 0.9;
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
}

.list_item {
  display: flex;
  width: 100%;
  height: 30%;
  flex-direction: column;
  align-items: center;
}

.image_list {
  width: 70%;
  border-radius: 150rpx;
  margin-top: 50rpx;
  flex: 1;
  display: flex;
}

.info_bottom {
  flex: 0.5;
  display: flex;
  width: 70%;
  align-items: end;
}

.info_bottom_left {
  flex: 2;
}

.info_bottom_right {
  flex: 0.3;
  display: flex;
  justify-content: end;
}
</style>